<template>
    <s-layout id="layout" :title="'出差申请'" navbar="normal" leftIconColor="#ffffff" :autoBack="true" :bgColor="'rgba(0,0,0,0)'" :tabbarshow='false' :titleStyle="{ color: '#ffffff', fontSize: '32rpx',fontWeight:'600' }">
        <!-- 最大盒子 -->
        <view class="container" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/staff_project_arrange.png)`,paddingTop:(safeAreaInsets?.top + 44) + 'px'}">
            <!-- 表单盒子 -->
            <view class="area form_box">
                <scroll-view scroll-y style="height: 70vh" :enable-back-to-top="true">
                    <u--form :labelStyle="labelStyle" labelPosition="left" :model="FormData" :rules="rules" ref="formRole" :borderBottom="false">
                        <!-- 出差事由 -->
                        <view>
                            <view class="remark"><text class="symbol">*</text>出差事由：</view>
                            <up-textarea :placeholderStyle="{color:'#999999',fontWeight: 500,fontSize:'26rpx'}" height="80" v-model="FormData.title" placeholder="请输入出差事由"></up-textarea>
                            <text class="warning" v-show="title_warning">请输入出差事由</text>
                        </view>
                        <!-- 交通方式 -->
                        <u-form-item :required="true" :borderBottom="false" :labelWidth="80" label="交通方式：" prop="vehicle" ref="vehicle">
                            <up-radio-group v-model="vehicleradiovalue" activeColor="#2f54eb" shape="square"  placement="row"  @change="vehicleGroupChange">
                                <up-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in trip_mode" :key="index" :label="item.name" :name="item.name">
                                </up-radio>
                            </up-radio-group>    
                        </u-form-item>
                        <!-- 单程往返 -->
                        <u-form-item :required="true" :borderBottom="false" :labelWidth="80" label="单程往返：" prop="type" ref="type">
                            <up-radio-group v-model="typeradiovalue" activeColor="#2f54eb" shape="square"  placement="row"  @change="typeGroupChange">
                                <up-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in arrive_and_depart" :key="index" :label="item.name" :name="item.name">
                                </up-radio>
                            </up-radio-group>
                        </u-form-item>
                        <!-- 出发地 -->
                        <u-form-item @tap="startPlaceShow" :required="true" :borderBottom="false" :labelWidth="120" label="出发地：" prop="start_place" ref="start_place">
                            <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" disabled inputAlign="right" type="text" placeholder="请选择出发地" v-model="FormData.start_place" border="none"></u--input>
                        </u-form-item>
                        <!-- 目的地 -->
                        <u-form-item @tap="endPlaceShow" :required="true" :borderBottom="false" :labelWidth="120" label="目的地：" prop="end_place" ref="end_place">
                            <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" disabled inputAlign="right" type="text" placeholder="请选择目的地" v-model="FormData.end_place" border="none"></u--input>
                        </u-form-item>
                        <!-- 开始时间 -->
                        <u-form-item :required="true" :borderBottom="false" :labelWidth="120" label="开始时间：" prop="start_date" ref="start_date">
                            <view class="date_range" @tap="startDateShow(index)">
                                <view class="date_image">
                                    <image :src="`${baseUrl}/uploads/uniapp_image/staff/class_icon01.png`"  mode="scaleToFill"/>
                                </view>
                                <view class="range_time">{{ FormData.start_date ? FormData.start_date : '选择日期' }}</view>
                                <view class="icon">
                                    <up-icon :bold="true" name="arrow-right" color="#0038F7" size="13"></up-icon>
                                </view>
                            </view>
                        </u-form-item>
                        <!-- 结束时间 -->
                        <u-form-item :required="true" :borderBottom="false" :labelWidth="120" label="结束时间：" prop="end_date" ref="end_date">
                            <view class="date_range" @tap="endDateShow(index)">
                                <view class="date_image">
                                    <image :src="`${baseUrl}/uploads/uniapp_image/staff/class_icon01.png`"  mode="scaleToFill"/>
                                </view>
                                <view class="range_time">{{ FormData.end_date ? FormData.end_date : '选择日期' }}</view>
                                <view class="icon">
                                    <up-icon :bold="true" name="arrow-right" color="#0038F7" size="13"></up-icon>
                                </view>
                            </view>
                        </u-form-item>
                        <!-- 出差天数 -->
                        <u-form-item :required="true" :borderBottom="false" :labelWidth="120" label="出差天数：" prop="days" ref="days">
                            <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" disabled inputAlign="right" type="text" :placeholder="days_placeholder" v-model="FormData.days" border="none"></u--input>
                        </u-form-item>
                        <!-- 出行人(同行人) -->
                        <u-form-item @tap="skipEmployeeList" :borderBottom="false" :labelWidth="130" label="出行人(同行人)：" prop="accompany_person" ref="accompany_person">
                            <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" disabled inputAlign="right" type="text" placeholder="请选择同行人" v-model="Employee_data" border="none"></u--input>
                        </u-form-item>
                    </u--form>
                </scroll-view>
            </view>
        </view>
    </s-layout>

    <!-- 出发地 && 弹出 -->
    <up-picker :show="start_place_show" :closeOnClickOverlay="true" ref="start_place_Ref" :columns="start_place_columns" @close="start_place_close" @confirm="start_place_confirm" @change="start_place_changeHandler" @cancel="start_place_cancel"></up-picker>
    <!-- 目的地 && 弹出 -->
    <up-picker :show="end_place_show" :closeOnClickOverlay="true" ref="end_place_Ref" :columns="end_place_columns" @close="end_place_close" @confirm="end_place_confirm" @change="end_place_changeHandler" @cancel="end_place_cancel"></up-picker>
    <!-- 开始时间 && 弹出 -->
    <up-datetime-picker title="开始时间" :closeOnClickOverlay="true" :minDate="currentTimestamp" :show="start_date_show" @close="start_date_close" @cancel="start_date_cancel" @confirm="start_date_confirm" mode="date"></up-datetime-picker>
    <!-- 结束时间 && 弹出 -->
    <up-datetime-picker title="结束时间" :closeOnClickOverlay="true" :minDate="FormData.start_date == '' ? currentTimestamp : start_date_timestamp" :show="end_date_show" @close="end_date_close" @cancel="end_date_cancel"  @confirm="end_date_confirm" mode="date"></up-datetime-picker>
    <!-- 底部保存按钮 -->
    <view>
        <s-button @netWork="submitForm" :text="'申请出差'" />
    </view>
</template>

<script setup>
    import sheep from '@/sheep';
    import { ref, reactive } from 'vue';
    import { onLoad, onShow,onUnload } from '@dcloudio/uni-app';
    import { baseUrl } from "@/sheep/config";
    import { formatDate } from '@/utils/fn.js';
    import { isEmpty } from '@/sheep/helper/utils.js'
    import { province,city } from './city.js'
    const { safeAreaInsets } = uni.getSystemInfoSync()
    onLoad(() => {

    })

    onShow(() => {
        uni.$once('Employee',(e) => {
            Employee_data.value = e.Employee_data.map(item => item.nickname).join(',')  // 用户展示员工名称
            FormData.accompany_person = e.Employee_data.map(item => item.id).join(',')  // 传递员工id给后台
		})
    })

    onUnload(() => {
    // uni.$off('Employee'); // 清除名为'receive'的事件监听器
	})

    const Employee_data = ref('')
    const currentTimestamp = new Date().getTime(); // 生成当日时间戳 单位：毫秒
    const days_placeholder = ref('请选择开始时间')
    const formRole = ref(null)
    const title_warning = ref(false)   // 出差事由警告框
    const FormData = reactive({
        title:'',           // 出差事由
        vehicle:'1',         // 交通工具:1=飞机,2=火车,3=汽车,4=其他
        type:'1',            // 单程往返:1=单程,2=往返
        start_place:'',     // 出发地
        end_place:'',       // 目的地
        start_date:'',      // 开始时间
        end_date:'',        // 结束时间
        days:'',            // 出差天数
        accompany_person:'' // 陪同人
    })

    // 表单验证
    const rules = {
        title:[
            {
                required:true,
                message:'请输入出差事由',
            }
        ],
        vehicle:[
            {
                required:true,
                message:'请选择交通方式',
            }
        ],
        type:[
            {
                required:true,
                message:'请选择单程往返',
            }
        ],
        start_place:[
            {
                required:true,
                message:'请选择出发地点',
            }
        ],
        end_place:[
            {
                required:true,
                message:'请选择目的地点',
            }
        ],
        start_date:[
            {
                required:true,
                message:'请选择开始时间',
            }
        ],
        end_date:[
            {
                required:true,
                message:'请选择结束时间',
            }
        ],
        days:[
            {
                required:true,
                message:'请选择开始与结束时间',
            }
        ],
    }

    // 交通工具选择逻辑
    const trip_mode = reactive([
        {  name: '飞机',  disabled: false,  value:'1'},
        {  name: '火车',  disabled: false,  value:'2'},
        {  name: '汽车',  disabled: false,  value:'3'},
        {  name: '其他',  disabled: false,  value:'4'}
    ]);
    const vehicleradiovalue = ref('飞机');
    const vehicleGroupChange = (n) => {
        switch(vehicleradiovalue.value) {
            case '飞机':
                FormData.vehicle = '1'
                break;
            case '火车':
                FormData.vehicle = '2'
                break;
            case '汽车':
                FormData.vehicle = '3'
                break;
            case '其他':
                FormData.vehicle = '4'
                break;
        }
    };
    
    // 单程往返选择逻辑
    const arrive_and_depart = reactive([
        {  name: '单程',  disabled: false,  value:'1'},
        {  name: '往返',  disabled: false,  value:'2'}
    ]);
    const typeradiovalue = ref('单程');
    const typeGroupChange = (n) => {
        switch(typeradiovalue.value) {
            case '单程':
                FormData.type = '1'
                break;
            case '往返':
                FormData.type = '2'
                break;
        }
    };

    // 出发地选择逻辑
    const start_place_show = ref(false)
    const start_place_Ref = ref(null)
    const start_place_columns = ref([province,city[0]]);
    const start_place_columnData = ref(city)
        // 弹出
    const startPlaceShow = () => {
        start_place_show.value = true
    }
        // 根据一级联动切换二级联动
    const start_place_changeHandler = (e) => {
        const { columnIndex, value, values, index } = e;
        if (columnIndex === 0) {
            start_place_Ref.value.setColumnValues(1, start_place_columnData.value[index]);
        }
    };
        // 确定
    const start_place_confirm = (e) => {
        FormData.start_place = `${e.value[0]}-${e.value[1]}`
        start_place_close()
    };
        // 关闭
    const start_place_close = () => {
        start_place_show.value = false
    }
        // 取消
    const start_place_cancel = () => {
        start_place_close()
    }

    // 目的地选择逻辑
    const end_place_show = ref(false)
    const end_place_Ref = ref(null)
    const end_place_columns = ref([province,city[0]]);
    const end_place_columnData = ref(city)
        // 弹出
    const endPlaceShow = () => {
        end_place_show.value = true
    }
        // 根据一级联动切换二级联动
    const end_place_changeHandler = (e) => {
        const { columnIndex, value, values, index } = e;
        if (columnIndex === 0) {
            end_place_Ref.value.setColumnValues(1, end_place_columnData.value[index]);
        }
    };
        // 确定
    const end_place_confirm = (e) => {
        FormData.end_place = `${e.value[0]}-${e.value[1]}`
        end_place_close()
    };
        // 关闭
    const end_place_close = () => {
        end_place_show.value = false
    }
        // 取消
    const end_place_cancel = () => {
        end_place_close()
    }

    // 开始时间选择逻辑
    const start_date_show = ref(false)
        // 弹出
    const startDateShow = () => {
        start_date_show.value = true
    }
        // 确定
    const start_date_timestamp = ref()  // 开始时间时间戳
    const start_date_confirm = (e) => {
        start_date_timestamp.value = e.value
        FormData.start_date = formatDate(e.value/1000)
        if(FormData.end_date == '') {
            days_placeholder.value = '请选择结束时间'
        }
        if(FormData.start_date !== '' && FormData.end_date !== '') {
            // 计算时间差（毫秒）
            const timeDiff = end_date_timestamp.value - start_date_timestamp.value
            if(timeDiff >= 0) {
                // 将时间差转换为天数
                const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
                FormData.days = String(daysDiff+1)
            } else {
                sheep.$helper.toast('请输入正确的起止日期');
                FormData.days = ''
            }
        }
        start_date_close()
    }
        // 关闭
    const start_date_close = () => {
        start_date_show.value = false
    }
        // 取消
    const start_date_cancel = () => {
        start_date_close()
    }

    // 结束时间选择逻辑
    const end_date_show = ref(false)
        // 弹出
    const endDateShow = () => {
        end_date_show.value = true
    }
        // 确定
    const end_date_timestamp = ref()  // 结束时间时间戳
    const end_date_confirm = (e) => {
        end_date_timestamp.value = e.value
        FormData.end_date = formatDate(e.value/1000)
        if(FormData.start_date == '') {
            days_placeholder.value = '请选择开始时间'
        }
        if(FormData.start_date !== '' && FormData.end_date !== '') {
            // 计算时间差（毫秒）
            const timeDiff = end_date_timestamp.value - start_date_timestamp.value
            if(timeDiff >= 0) {
                // 将时间差转换为天数
                const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
                FormData.days = String(daysDiff+1)
            } else {
                sheep.$helper.toast('请输入正确的起止日期');
                FormData.days = ''
            }
        }
        end_date_close()
    }
        // 关闭
    const end_date_close = () => {
        end_date_show.value = false
    }
        // 取消
    const end_date_cancel = () => {
        end_date_close()
    }

    // 选择出行人(陪同人)逻辑
    const skipEmployeeList = () => {
        sheep.$router.go('/subpackage/staff/workbench/evection/evection_trip_person')
    }

    // 提交表单
    const submitForm = () => {
            // #ifdef MP
            sheep.$platform.useProvider('wechat').subscribeMessage(['apply_notice','apply_result_notice']);
            // #endif
        uni.$u.throttle(() => {
        if(FormData.title == '') {
            return title_warning.value = true
        } else {
            title_warning.value = false
        }
        formRole.value.validate().then(async (res)=> {
            const resust = await sheep.$api.evection.postEvectionAdd(FormData);
            if (resust.code == 1) {
                sheep.$helper.toast(resust.msg);
                setTimeout(() => {
                    sheep.$router.back(true)
                }, 500)
            } else {
                sheep.$helper.toast(resust.msg);
            }
        }).catch((err) => {})
    },1000)
    }

</script>

<style lang="scss" scoped>

    :deep(.u-form-item__body.data-v-b4fd400b){
        height: 80rpx;
        margin-top:30rpx;
        padding-left: 10rpx;
        background-color: #F9FAFF;
    }

    :deep(.u-textarea.data-v-31706dd7) {
        background-color: #F9FAFF;
        padding: 0;
    }

    // uview 内部样式 button 按钮边框
    :deep(.u-reset-button.data-v-05ea451b) {
        border-width: 0;
        height: 134rpx;
    }

    // uview 内部样式 up-textarea 文字距离
    :deep(.u-textarea__field.data-v-31706dd7) {
        margin-top: 30rpx;
        margin-left: 30rpx;
    }

    // uview 内部样式 输入内容右边间距
    :deep(.u-input__content__field-wrapper__field.data-v-5904192e) {
        margin-right: 20rpx;
    }

    // uview 内部样式 label左边间距
    :deep(.u-form-item__body__left.data-v-b4fd400b) {
        margin-left: 20rpx;
    }

    // uview 内部样式 label字体粗细
    :deep(.u-form-item__body__left__content__label.data-v-b4fd400b) {
        font-weight: $uni-font-weight;
    }

    // uview 内部样式 未输入提示拦截框
    :deep(.u-form-item__body__right__message.data-v-b4fd400b) {
        margin-left: 0 !important;
    }

    // uview 内部样式 单选框的外边距
    :deep(.u-radio__icon-wrap.data-v-edf95844) {
        margin-right: 6rpx;
    }

    // uview 内部样式 单选框 && 文字 的外边距
    :deep(.u-radio.data-v-edf95844) {
        margin-right: 10rpx;
        margin-top: 19rpx;
    }

    // uview 内部样式 选择器弹窗
    @import '../compentns/up_sheet.scss';
    

    // 最大盒子
    .container {
        width: 100%;
        background-size: cover; /* 或 contain */
    }
    // 版心
    .area {
        width: calc(100% - 40rpx);
        margin: 0 20rpx;
    }

    // 申请事由盒子
    .form_box {
        width: calc(100% - 100rpx);
        padding: 60rpx 30rpx;
        margin-top: 20rpx;
        border-radius: 16rpx;
        background-color: #FFFFFF;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    }

    // 报销明细
    .message {
        display: flex;
        justify-content: space-between; /* 左右对齐 */
        width: 100%;
        height: 48rpx;
        margin: 30rpx 0;
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: 34rpx;
        font-style: normal;
        text-decoration: none;
        position: relative;
        align-items: center;
    }

        // 报销内容
        .remark {
            width: 100%;
            height: 100rpx;
            line-height: 100rpx;
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: 30rpx;
            font-style: normal;
            text-decoration: none;
        }

        // 图片
        .image {
            width: 100%;
            height: 100rpx;
            line-height: 100rpx;
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: 30rpx;
            font-style: normal;
            text-decoration: none;
        }

        // 符号
        .symbol {
            color: #f56c6c;
        }

    // 选择日期盒子
    .date_range {
        height: 64rpx;
        width: 274rpx;
        border-radius: 16rpx;
        border: 4rpx solid #1241E2;
        display: flex;
        align-items: center;
        margin-left: 13vw;
        position: relative;
        // 图片
        .date_image {
            width: 28rpx;
            height: 28rpx;
            margin-left: 20rpx;
            margin-right: 12rpx;
            image {
                width: 100%;
                height: 100%;
            }
        }
    }

    // 时间
    .range_time {
        font-family: PingFangSC;
        color: $uni-color-primary;
        font-weight: $uni-font-weight;
       font-size:$uni-font-size-26;
        font-style: normal;
        text-decoration: none;
        text-align: right;
    }
    .icon {
        position: absolute;
        right: 30rpx;
    }

    // 警告
    .warning {
        font-size: $uni-font-size-sm;
        line-height: 24rpx;
        color: #f56c6c;
    }

</style>



